<template>
  <div class="about">
    <CodeEditor class="code-editor" v-model="value" @input="handleInputChange"/>
    <a-button class="button-A" size="small" type="primary" @click="handleCopyClick">复制</a-button>
    <a-button class="button-B" size="small" type="danger" @click="handleFormatClick">格式化</a-button>
  </div>
</template>

<script>

import CodeEditor from "@/components/CodeEditor.vue";
import {copy} from "@/utils";

export default {
  components: {
    CodeEditor
  },
  data() {
    return {
      value: '[\n' +
          '    {\n' +
          '        "userInfo":{\n' +
          '            "name":"abc",\n' +
          '            "email":"112@qq.com"\n' +
          '        },\n' +
          '        "appId":"12233",\n' +
          '        "appName":"我的"\n' +
          '    }\n' +
          ']'
    }
  },
  mounted() {
    this.handleFormatClick()
  },
  methods: {
    handleCopyClick() {
      copy(this.value)
    },
    handleFormatClick() {
      // 1、JSON.parse：把JSON字符串转换为JSON对象
      // 2、JSON.stringify：把JSON对象 转换为 有缩进的 JSON字符串格式
      this.value = JSON.stringify(JSON.parse(this.value), null, '\t')
    },
    handleInputChange(val) {
      console.log(val)
    }
  }

}

</script>

<style lang="less" scoped>

.about {
  position: relative;

  .button-A {
    top: 2px;
    right: 2px;
    position: absolute;
  }

  .button-B {
    top: 2px;
    right: 52px;
    position: absolute;
  }
}

</style>
